<template>
  <div>
    <div class="box1">
      <van-cell title="" size="large" :border="false">
        <template #label>
          <div class="titleBox">
            <div class="left">
              <div>
                <van-image class="img" fit="cover" round :src="$store.state.userPhoto" @click="show=true"/>
              </div>
              <div class="textBox">
                <div>{{ $store.state.userName }}</div>
                <div class="textBtn">申请认证</div>
              </div>
            </div>
          </div>
          <van-row>
            <van-col span="8">
              <div>{{ userObj.art_count }}</div>
              <div>动态</div>
            </van-col>
            <van-col span="8">
              <div>{{ userObj.follow_count }}</div>
              <div>关注</div>
            </van-col>
            <van-col span="8">
              <div>{{ userObj.fans_count }}</div>
              <div>粉丝</div>
            </van-col>
          </van-row>
        </template>
      </van-cell>
    </div>

    <van-cell is-link to="/userEdit">
      <template #title>
        <div class="text">
          <van-icon name="edit" />编辑资料
        </div>
      </template>
    </van-cell>
    <van-cell is-link to="/chat">
      <template #title>
        <div class="text">
          <van-icon name="chat-o" />小思同学
        </div>
      </template>
    </van-cell>
    <van-cell is-link>
      <template #title>
        <div class="text" @click="quitFn()">
          <van-icon name="warning-o" />退出登录
        </div>
      </template>
    </van-cell>
    <van-popup v-model="show"><van-image class="img2" fit="cover"  :src="$store.state.userPhoto" @click="show=true"/></van-popup>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapMutations } from 'vuex'
export default {
  name: 'user',
  created () {
    this.getData()
  },
  // 路由发生改变时再请求
  activated () {
    this.getData()
  },
  data () {
    return {
      userObj: {},
      show: false
    }
  },
  methods: {
    ...mapMutations(['SET_USERPHOTO', 'SET_USERNAME']),
    async getData () {
      const { data: res } = await this.$api.userinfoAPI()
      this.userObj = res.data
      this.SET_USERPHOTO(res.data.photo)
      this.SET_USERNAME(res.data.name)
    },
    quitFn () {
      Dialog.confirm({ title: '是否退出登录' }).then(() => {
        this.$storage.removeStorage('geek-itheima')
        this.$storage.removeStorage('refresh_token')
        // 无历史记录跳转
        this.$router.replace(`/login?path=${this.$router.currentRoute.fullPath}`)
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 60px;
  height: 60px;
}

.img2{
  width: 300px;
  height: 300px;
}

.box1 {
  .van-cell {
    background: #3196fa;
    background: url('../../assets/banner.png') no-repeat;
    background-size: cover;
  }

  div {
    color: #fff;
  }
}

.van-row {
  margin-bottom: 10px;
}

.text {
  text-align: left;
}

.titleBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;

  .left {
    display: flex;
    align-items: center;
    color: #000;
    font-weight: 400;

    .textBox {
      margin-left: 5px;

      div {
        text-align: left;
        margin-bottom: 2px;
      }

      .textBtn {
        background: #fff;
        width: 60px;
        text-align: center;
        color: #3196fa;
        border-radius: 2px;
      }
    }
  }
}
</style>
